<template>
	<view class="shezhi">
		<view class="shezhi-shang">
			<view class="title">字号</view>
			<view class="btn" @click="isFont(-1)">A-</view>
			<view class="font">{{isFontSize}}</view>
			<view class="btn" @click="isFont(1)">A+</view>
		</view>
		<view class="shezhi-center">
			<view class="center-title">行高</view>
			<view class="center-img"><image :src="hangGao == 1 ? '/static/read/hang_0_1.png' : '/static/read/hang_0_0.png' " mode="" @click="ishangGao(1)"></image></view>
			<view class="center-img"><image :src="hangGao == 2 ? '/static/read/hang_1_1.png' : '/static/read/hang_1_0.png' " mode="" @click="ishangGao(2)"></image></view>
			<view class="center-img"><image :src="hangGao == 3 ? '/static/read/hang_2_1.png' : '/static/read/hang_2_0.png' " mode="" @click="ishangGao(3)"></image></view>
		</view>
		<view class="shezhi-xia">
			<view class="xia-title">背景</view>
			<view class="xia-bgc-a xia-margin" @click="setBgColor(1)"><image src="/static/read/520.png" mode="" v-show="beiJing ==1"></image></view>
			<view class="xia-bgc-b xia-margin" @click="setBgColor(2)"><image src="/static/read/520.png" mode="" v-show="beiJing ==2"></image></view>
			<view class="xia-bgc-c xia-margin" @click="setBgColor(3)"><image src="/static/read/520.png" mode="" v-show="beiJing ==3"></image></view>
			<view class="xia-bgc-d xia-margin" @click="setBgColor(4)"><image src="/static/read/520.png" mode="" v-show="beiJing ==4"></image></view>
			<view class="xia-bgc-e xia-margin" @click="setBgColor(5)"><image src="/static/read/520.png" mode="" v-show="beiJing ==5"></image></view>
			<view class="xia-bgc-f xia-margin" @click="setBgColor(6)"><image src="/static/read/520.png" mode="" v-show="beiJing ==6"></image></view>
		</view>
	</view>
</template>

<script  lang="ts" setup>
import { ref } from 'vue'
import {onShow } from '@dcloudio/uni-app'
import { useReadStore} from '@/store/modules/read'

const readStore = useReadStore()
const props = defineProps({
            fontSize: {
                type: Number,
                default() {
                    return 48
                }
            },
            gao: {
                type: Number,
                default() {
                    return 1
                }
            },
            bei: {
                type: Number,
                default() {
                    return 1
                }
            }
})
const hangGao = ref < number > (1)
 const lineHight = ref < number > (75)
const beiJing = ref < number > (1)
const bgc = ref < string > ('#fff')
const cor = ref < string > ('#00000')
const isFontSize = ref <number> (0)

const emits = defineEmits(['fontSetting','height','bgColor'])
const isFont = (size : number) :void =>{
	isFontSize.value += size
	readStore.SetFontSize(isFontSize.value)
	emits('fontSetting',isFontSize.value)

}
const ishangGao = (type: number) :void =>{
	hangGao.value =  type
	switch (type) {
		case 1:
			lineHight.value = 75
			break;
		case 2: 
		    lineHight.value = 80;
		break;
		case 3: 
		 lineHight.value = 95;
		break;
	}
	let params = {
		lineHeight: lineHight.value,
		hangGao: hangGao.value
	}
	readStore.SetLineHeight(params )
	emits('height',lineHight.value)
	

}
const setBgColor = (type: number) :void =>{
	beiJing.value = type
	switch (type) {
		case 1:
			bgc.value = "#fff";
			cor.value = "#000000";
			break;
		case 2:
			bgc.value ="#fcefcd";
			cor.value = "#000000";
			break;
		case 3:
			bgc.value = "#D1E4D0";
			cor.value = "#000000";
			break;
		case 4:
		   bgc.value = "#E7E2C4";
		   cor.value = "#000000";
			break;
		case 5:
			bgc.value = "#ADE3D4";
			cor.value = "#000000";
			break;
		case 6:
			bgc.value = "#3A3F43";
			cor.value = "#fff";
			break;
	}
	readStore.SetBgColor({background: bgc.value,color: cor.value})
	emits('bgColor',bgc.value,cor.value)

}
onShow(() =>{
	hangGao.value = props.gao
	beiJing.value = props.bei
	isFontSize.value = props.fontSize

})



</script>

<style scoped lang="scss">
.shezhi{
	padding: 40rpx 36rpx;
	font-family: Microsoft YaHei;
	font-weight: 400;
	.shezhi-shang{
		display: flex;
		align-items: center;
		.title{
			font-size: 28rpx;
			color: #6D6D6D;
		}
		.btn{
			width: 180rpx;
			height: 52rpx;
			background: #CFCFCF;
			border-radius: 26rpx;
			font-size: 33rpx;
			color: #FFFFFF;
			text-align: center;
			margin-left: 24rpx;
		}
		.font{
			font-size: 32rpx;
			color: #3C3C3C;
			margin: 0 51rpx;
		}
	}
	.shezhi-center{
		height:120rpx ;
		display: flex;
		align-items: center;
		.center-title{
			font-size: 28rpx;
			color: #6D6D6D;
		}
		.center-img{
			image{
				width: 182rpx;
				height: 54rpx;
				margin-left: 25rpx;
			}
		}
	}
	.shezhi-xia{
		display: flex;
		align-items: center;
		.xia-title{
			font-size: 28rpx;
			color: #6D6D6D;
		}
		.xia-bgc-a{
			width: 62rpx;
			height: 62rpx;
			background-color: #fffae9;
			border-radius: 50%;
		}
		.xia-bgc-b{
			width: 62rpx;
			height: 62rpx;
			background-color:#fcefcd;
			border-radius: 50%;
		}
		.xia-bgc-c{
			width: 62rpx;
			height: 62rpx;
			background-color:#D1E4D0;
			border-radius: 50%;
		}
		.xia-bgc-d{
			width: 62rpx;
			height: 62rpx;
			background-color: #E7E2C4;
			border-radius: 50%;
		}
		.xia-bgc-e{
			width: 62rpx;
			height: 62rpx;
			background-color: #ADE3D4;
			border-radius: 50%;
		}
		.xia-bgc-f{
			width: 62rpx;
			height: 62rpx;
			background-color: #3A3F43;
			border-radius: 50%;
		}
		.xia-margin{
			margin: 0 21rpx;
			image{
				width: 62rpx;
				height: 62rpx;
			}
		}
	}
}
</style>
